<template>
  <div class="main">
    <div class="topTitle">考勤排班编辑</div>
    <div class="form_content">
      <NScrollbar>
        <NSpin :show="spinShow">
          <div class="content">
            <div style="width: 100%; display: flex; justify-content: center">
              <NForm ref="formRef" require-mark-placement="left" label-placement="left" :rules="rules" :label-width="50"
                :model="formValue" style="width: 900rem">
                <NSpace justify="space-between">
                  <NFormItem label="部门:">
                    <NInput placeholder="请输入部门" class="commonWidth" type="text" v-model:value="formValue.deptName"
                      disabled />
                  </NFormItem>

                  <NFormItem label="人员:">
                    <NInput placeholder="请输入人员" class="commonWidth" v-model:value="formValue.userName" disabled />
                  </NFormItem>
                </NSpace>

                <NSpace justify="space-between">
                  <NFormItem label="年份:">
                    <NInput placeholder="请输入年份" class="commonWidth" type="text" v-model:value="formValue.year"
                      disabled />
                  </NFormItem>

                  <NFormItem label="月份:">
                    <NInput placeholder="请输入月份" class="commonWidth" v-model:value="formValue.month" disabled />
                  </NFormItem>
                </NSpace>

                <div class="month-box">
                  <NFormItem v-for="(item, index) in formValue.userMonthRuleInfoVoList" :label="item.name" :key="index">
                    <NSpace align="center" justify="space-between" style="background-color: #fff; width: 360rem">
                      <n-time-picker v-model:formatted-value="item.startWorkTime" style="width: 120px"
                        placeholder="开始时间">
                        <template #icon></template>
                      </n-time-picker>
                      <span>→</span>
                      <n-time-picker v-model:formatted-value="item.endWorkTime" style="width: 120px" placeholder="结束时间"
                        :is-hour-disabled="(v: any) => handleUpdateFormatted(v, item.startWorkTime)">
                        <template #icon></template>
                      </n-time-picker>
                    </NSpace>
                  </NFormItem>
                </div>
              </NForm>
            </div>
          </div>
        </NSpin>
      </NScrollbar>
    </div>
  </div>
  <FixedAction>
    <div style="display: flex">
      <NSpace justify="start" style="flex: 0 0 42%">
        <NButton style="width: 78px; color: #5fb17f" ghost @click="goBack">
          <template #icon>
            <NImage :src="VBackImg" style="width: 25rem; height: 25rem"></NImage>
          </template>
          返回
        </NButton>
      </NSpace>

      <NSpace justify="center">
        <NButton type="primary" style="width: 125px" @click="confirm" :loading="loading">
          保存考勤排班
        </NButton>
      </NSpace>
    </div>
  </FixedAction>

  <NModal :auto-focus="false" v-model:show="contentVisible" @close="contentVisible = false">
    <VDialogContent @close="contentVisible = false" @submit="submit" title="保存提示">
      <div style="width: 300rem; height: 100rem; text-align: center; line-height: 100rem">
        您确定要保存吗？
      </div>
    </VDialogContent>
  </NModal>
</template>
<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import {
  NSpace,
  NForm,
  NInput,
  NFormItem,
  NButton,
  NScrollbar,
  useMessage,
  NSpin,
  NTimePicker,
  NModal,
  NImage,
  type FormInst
} from 'naive-ui'
import router from '@/router'
import { useTagStore } from '@/stores/layout'
import FixedAction from '@/components/FixedAction.vue'
import { sendRequest } from '@/utils/api'
import type { HttpResponse } from '@/utils/http'
import type { DisModel } from '@/api/receiveOrDispatch'
import { useRoute } from 'vue-router'
import VBackImg from '@/assets/images/back.png'

const tags = useTagStore().tags
const route = useRoute()
const message = useMessage()
import VDialogContent from '@/views/OA/Common/DialogContent.vue'

const formValue = reactive<Record<string, any>>({
  deptName: [], //部门
  month: null, //月份
  userName: null, //用户名
  year: null, //年份
  userMonthRuleInfoVoList: []
})
const rules: any = {
  ruleName: {
    required: true,
    message: '请输入规则名称',
    trigger: ['input', 'blur']
  },
  startWorkTime: {
    required: true,
    message: '请选择开始时间',
    type: 'any',
    trigger: ['select', 'change']
  }
}
const handleUpdateFormatted = (value: any, startTime: any) => {
  return startTime.split(':')[0] >= value
}
// 返回
const goBack = () => {
  const index = tags.findIndex((item: any) => item.path === router.currentRoute.value.fullPath)
  tags.splice(index, 1)
if (tags.length == 0) {
    router.push({ path: '/OA/Workbench/UserDesktop' })
  } else history.back()
}
// 保存
const loading = ref(false)
const formRef = ref<FormInst | null>(null)
const confirm = () => {
  contentVisible.value = true
}
// 提交
const contentVisible = ref(false)
const submit = async () => {
  contentVisible.value = false
  loading.value = true
  const [error, res] = await sendRequest<HttpResponse<DisModel>>({
    module: 'checkRules',
    api: 'workUpdate',
    override: {
      data: formValue
    }
  })
  loading.value = false
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  message.success('保存成功')
  goBack()
}
// 获取详情
const spinShow = ref(false)
const getWorkInfo = async () => {
  console.log(route.path)
  spinShow.value = true
  const [error, res] = await sendRequest<HttpResponse<DisModel[]>>({
    module: 'checkRules',
    api: 'workInfo',
    override: {
      params: {
        userId: route.query.id as never,
        month: route.query.month as never
      }
    }
  })
  if (error) return message.error(error.message), (spinShow.value = false)
  if (res.code !== 0) return message.error(res.msg), (spinShow.value = false)
  Object.keys(formValue).map((it: any) => (formValue[it] = res.data[it]))
  formValue.userMonthRuleInfoVoList.map((it: any) => {
    !it.startWorkTime ? (it.startWorkTime = undefined) : ''
    !it.endWorkTime ? (it.endWorkTime = undefined) : ''
  })
  spinShow.value = false
}

watch(
  () => route,
  async () => {
    if (route.path == '/OA/Office/WorkUpdate' && route.query.id && route.query.month) getWorkInfo()
  },
  { deep: true, immediate: true }
)
</script>
<style scoped lang="scss">
@mixin CommonFont {
  font-size: 16rem;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
}

.commonWidth {
  width: 360rem;
}

.main {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .topTitle {
    width: 100%;
    border-bottom: 1px solid #fff;
    padding: 15rem 20rem;
    margin-bottom: 20rem;
    @include CommonFont;
  }

  .month-box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .form_content {
    width: 100%;
    height: 100%;
    padding: 0 20rem 0rem;

    .content {
      display: flex;
      align-items: center;
      flex-direction: column;
      width: 100%;
      height: 100%;
      padding: 20rem 0 180rem;
      overflow-y: scroll;
      background-color: #ebeceb;

      .scope {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        height: 130rem;
        background: #e1e1e1;
        margin-bottom: 25rem;
        padding: 15rem 20rem;

        .userBox {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: auto;
          min-width: 150rem;
          height: 40rem;
          background-color: #fff;
          border-radius: 4rem;
          padding: 0 10rem;
          margin-right: 15rem;
        }
      }
    }
  }
}

.calendar-box {
  width: 100%;
  display: flex;
  flex-direction: column;

  .top-btn {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 5rem;
  }

  .bottom-cal {
    width: 100%;
    height: 400rem;
    display: flex;
    justify-content: center;

    .calendar {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      background-color: #fff;
      padding: 10rem;
      margin-top: 10rem;
    }
  }
}

.content::-webkit-scrollbar {
  display: none;
}

:deep(.n-calendar) {
  width: 100%;
  height: 100%;
}

::v-deep(.n-calendar-cell) {
  display: flex;
  flex-direction: column;
  cursor: auto;
  padding: 5rem;

  .n-calendar-date {
    display: none;

    .n-calendar-date__date {
      display: none;
    }
  }

  .main {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
  }
}

::v-deep(.n-calendar-cell--current .n-calendar-date .n-calendar-date__date) {
  background-color: transparent !important;
  color: black !important;
}

:deep(.n-spin-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-scrollbar-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-scrollbar-content) {
  width: 100%;
  height: 100%;
}

:deep(.n-spin-content) {
  width: 100%;
  height: 100%;
}

:deep(.n-input__border) {
  border: none;
}
</style>
